<template>
  <div class="mian">
    <div class="left">
      <h4>智能预警</h4>
      <div class="top">
        <div
          @click="changed1(index)"
          v-for="(item, index) in titleList"
          :key="index"
          class="top_t"
        >
          <div
            :class="['iconfont', 'icon-quanbu3']"
            :style="{ color: index == ind ? iconColor : '' }"
          ></div>
          <div class="icon" v-if="item.num">{{ item.num }}</div>
          <div class="text">{{ item.title }}</div>
        </div>
      </div>
      <div class="content">
        <!-- 全部 -->
        <div class="all" v-show="ind == 0">
          <table class="table">
            <thead>
              <tr>
                <th v-for="(item, key) in tableTh" :key="key">{{ item }}</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td v-for="(item, key) in tableTd" :key="key">{{ item }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- 综合安防 -->
        <div class="anfang" v-show="ind == 3">
          <div
            class="one"
            v-for="(item, index) in arr"
            :key="index"
            @click="changed(index)"
            :class="item.tag ? 'active' : ''"
          >
            <div class="one_l">
              <p>{{ item.title }}</p>
              <div class="box_1">
                <img :src="item.grade" class="img1" alt="" />
                <div class="box_r">
                  <p>{{ item.Smoke_density }}</p>
                  <p>{{ item.location }}</p>
                  <p>{{ item.time }}</p>
                </div>
              </div>
            </div>
            <div class="one_r">
              <button class="btn" @click="handerAnfang(index)">处 理</button>
            </div>
          </div>
        </div>
        <div id="waterFlow" v-show="ind == 4"></div>
        <div class="content_m" v-if="ind == 5">
          <div
            class="one"
            v-for="(item, index) in arr"
            :key="index"
            @click="changed(index)"
            :class="item.tag ? 'active' : ''"
          >
            <div class="one_l">
              <p>{{ item.title }}</p>
              <div class="box_1">
                <img :src="item.grade" class="img1" alt="" />
                <div class="box_r">
                  <!-- <p>等级：{{ item.water_level }}</p> -->
                  <p>{{ item.location }}</p>
                  <p>{{ item.time }}</p>
                </div>
              </div>
            </div>
            <div class="one_r">
              <button class="btn" @click="hander(index)">处 理</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <h4>智能预警详情</h4>
      <div class="one">
        <div class="identification">
          <b>问题描述</b> {{ warningDetails.problemDescription }}
        </div>
      </div>
      <div class="two">
        <h4>原因分析</h4>
        <p>{{ warningDetails.problemDescription }}</p>
        <div id="charts"></div>
      </div>
      <div class="suggestion">
        <h4>处理意见</h4>
        <p>{{ warningDetails.suggestion }}</p>
        <div>
          <div class="suggestion_t">
            <div>闸机</div>
            <div>闸机</div>
            <div>已通</div>
            <div>平均</div>
            <div>排队</div>
          </div>
          <div class="suggestion_m">
            <div>深圳</div>
            <div>SZ</div>
            <div>22</div>
            <div>1</div>
            <div>6</div>
          </div>
        </div>
      </div>
      <div class="dispatch">
        <h4>指挥调度</h4>
        <div class="dispatch_t">
          <div>值班人员</div>
          <div>工号</div>
          <div>电话</div>
        </div>
        <div class="dispatch_m">
          <div v-for="(item, index) in warningDetails.dispatch" :key="index">
            <div>{{ item.peple }}</div>
            <div>{{ item.id }}</div>
            <div>{{ item.telephone }}</div>
            <div>{{ item.content }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  ref,
  onMounted,
  onUnmounted,
  reactive,
  watch,
  triggerRef,
  nextTick,
  computed,
  watchEffect,
} from "vue";
import * as echarts from "echarts";
import { useStore } from "@/store/index.js";
import { Loading } from "element-plus/es/components/loading/src/service";
let store = useStore();
let iconColor = ref("#fff");
let ind = ref(0);
let titleList = ref([
  { title: "全部", num: 0 },
  { title: "能效管理", num: 0 },
  { title: "便捷通行", num: 0 },
  { title: "综合安防", num: 0 },
  { title: "水流预警", num: 0 },
  { title: "水淹预警", num: 0 },
]);
// let newObj = reactive({});
let arr = ref();
let warningDetails = ref({
  problemDescription: "部分楼温度偏高。co2含量较高",
  reason: "单线负载过高",
  suggestion: "F14 F19 负载比重不合适，请及时均衡",
  dispatch: [
    {
      peple: "王文武",
      id: "wx75641",
      telephone: "15816184243",
      content: "派发",
    },
    {
      peple: "王文武",
      id: "wx75641",
      telephone: "15816184243",
      content: "派发",
    },
    {
      peple: "王文武",
      id: "wx75641",
      telephone: "15816184243",
      content: "派发",
    },
  ],
});
let changed = (ind) => {
  // arr.value[ind].tag = true;
  warningDetails.value = {
    problemDescription: "部分楼温度偏高。co2含量较高",
    reason: "单线负载过高",
    suggestion: "F14 F19 负载比重不合适，请及时均衡",
    dispatch: [
      {
        peple: "王文武",
        id: "wx75641",
        telephone: "15816184243",
        content: "派发",
      },
      {
        peple: "王文武",
        id: "wx75641",
        telephone: "15816184243",
        content: "派发",
      },
      {
        peple: "王文武",
        id: "wx75641",
        telephone: "15816184243",
        content: "派发",
      },
    ],
  };
};
let yanWuData = ref([]);
let warningArr = ref([]);
let parsedData = ref();
let WaterFlowWarning = reactive({});
// 改变
let changed1 = (i) => {
  ind.value = i;
  switch (i) {
    case 0:
      arr.value = [];
      break;
    case 1:
      arr.value = [];
      break;
    case 2:
      arr.value = [];
      break;
    case 3:
      arr.value = yanWuData.value;
      break;
    case 4:
      // nextTick(() => {
      // });
      arr.value = [];
      break;
    case 5:
      arr.value = warningArr.value;
      break;
  }
  // iconColor.value = "#fff";
};
//水流预警
let waterArr = ref([]);
let waterFlowChar = ref(null);
let option = {};
const waterFlowFn = (ele) => {
  option = {
    title: {
      text: "水流检测",
      textStyle: {
        color: "#fff",
      },
    },
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
    legend: {
      // data: ["昨日总人数", "今日实时人数", "昨日使用率"],
      top: "4%",
      right: "5%",

      textStyle: {
        color: "#fff",
      },
      selectedMode: false,
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    // baseOption: {
    //   timeline: {
    //     symbolSize: 5,
    //     axisType: "category",
    //     // realtime: false,
    //     // loop: false,
    //     autoPlay: false,
    //     // currentIndex: 2,
    //     playInterval: 1000,
    //     // controlStyle: {
    //     //     position: 'left'
    //     // },
    //     data: [
    //       "2002-01-01:00:00",
    //       "2002-01-01:02:00",
    //       "2002-01-01:04:00",
    //       {
    //         value: "2002-01-01:06:00",
    //         tooltip: {
    //           formatter: "{b} GDP达到一个高度",
    //         },
    //         symbol: "diamond",
    //         symbolSize: 10,
    //       },
    //       "2002-01-01:06:00",
    //       "2002-01-01:08:00",
    //       "2002-01-01:10:00",
    //       "2002-01-01:12:00",
    //       "2002-01-01:14:00",
    //       {
    //         value: "2002-01-01:16:00",
    //         tooltip: {
    //           formatter: function (params) {
    //             return params.name + "GDP达到又一个高度";
    //           },
    //         },
    //         symbol: "diamond",
    //         symbolSize: 10,
    //       },
    //       "2002-01-01:18:00",
    //       "2002-01-01:20:00",
    //       "2002-01-01:22:00",
    //       "2002-01-01:24:00",
    //     ],
    //     label: {
    //       formatter: function (s) {
    //         return new Date(s).getFullYear();
    //       },
    //       fontSize:10
    //     },
    //   },
    // },
    xAxis: {
      type: "category",
      data: waterArr.value.map((item, index) => index),
      axisLabel: {
        color: "#fff",
      },
      splitLine: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          type: "solid",
          color: "#fff", //坐标线的颜色
          width: "1", //坐标线的宽度
        },
      },
    },
    yAxis: {
      min: 0,
      max: 10,
      type: "value",
      splitLine: {
        show: false,
      },
      axisLabel: {
        color: "#fff",
      },
      axisLine: {
        lineStyle: {
          type: "solid",
          color: "#fff", //坐标线的颜色
          width: "1", //坐标线的宽度
        },
      },
    },
    series: [
      {
        name: "人流量",
        data: waterArr.value.map((item) => item.human_detection),
        type: "bar",
      },
      // {
      //   data: waterArr.value.map((item) => item.discharge),
      //   type: "bar",
      //   name:'水流量',
      // },
    ],
  };
  if (ind.value == 4) {
    if (waterFlowChar.value == null) {
      waterFlowChar.value = echarts.init(ele);
      waterFlowChar.value.setOption(option);
    } else {
      waterFlowChar.value.setOption(option);
    }
    window.addEventListener("resize", () => {
      waterFlowChar.value.resize();
    });
  }
};
// 原因分析
let charts = ref(null);
let chartColor = "#fff";
let chartsFn = () => {
  let option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "center",
      left: "60%",
      width: 20,
      textStyle: {
        color: chartColor,
      },
      selectedMode: false,
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        center: ["30%", "50%"],
        radius: ["55%", "65%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 2,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
          { value: 484, name: "Union Ads" },
          { value: 300, name: "Video Ads" },
        ],
      },
    ],
  };
  charts = echarts.init(document.getElementById("charts"));
  charts.setOption(option);
};
// 获取时间戳
function getTime(timestamp) {
  var date = new Date(timestamp);
  var year = date.getFullYear();
  var month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的
  var day = ("0" + date.getDate()).slice(-2);
  var hours = ("0" + date.getHours()).slice(-2);
  var minutes = ("0" + date.getMinutes()).slice(-2);
  var seconds = ("0" + date.getSeconds()).slice(-2);
  return (
    year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds
  );
}
// 获取温度数据
let tepData = ref([]);
function getTemData(str) {
  if (tepData.value.length >= 5) {
    tepData.value.shift();
  }
  tepData.value.push(str);
}
let hander = (idx) => {
  setTimeout(() => {
    warningArr.value.splice(idx, 1);
  }, 1000);
};
let handerAnfang = (idx) => {
  setTimeout(() => {
    yanWuData.value.splice(idx, 1);
  }, 1000);
};
let arrNew = [];
function getArr(obj) {
  if (!warningArr.value.length && getNewDate(obj).water_level != 0) {
    warningArr.value.push(getNewDate(obj));
  } else {
    if (
      !warningArr.value.find((item) => item.water_level == obj.water_level) &&
      obj.water_level
    ) {
      warningArr.value.push(getNewDate(obj));
    } else if (
      !warningArr.value.find((item) => item.water_level == obj.water_level) &&
      obj.water_level
    ) {
      warningArr.value.push(getNewDate(obj));
    } else if (
      !warningArr.value.find((item) => item.water_level == obj.water_level) &&
      obj.water_level3
    ) {
      warningArr.value.push(getNewDate(obj));
    }
  }
}
let getYanwuData = (obj) => {
  if (
    !yanWuData.value.find((item) => item.title == "烟雾预警") &&
    obj.Smoke_density > 40
  ) {
    yanWuData.value.push(getNewDate(obj));
  }
  titleList.value.find((item) => {
    if (item.title == "烟雾预警") {
      item.num = yanWuData.value.length;
    }
  });
};
function getNewDate(obj) {
  let newObj = {};
  if ("Smoke_density" in obj) {
    newObj = {
      title: "烟雾预警",
      location: "地点：7楼",
      grade: require("@/assets/waring/yanwu.png"),
      time: "时间：" + getTime(Date.now()),
      Smoke_density: obj.Smoke_density,
    };
  } else {
    newObj = {
      show: "",
      water_level: 0,
      location: "地点：7楼",
      time: "时间：" + getTime(Date.now()),
      title: "水淹预警",
      state: "未处理",
      grade: "",
    };
    if (obj.water_level == 1) {
      newObj.grade = require("@/assets/waring/leval1.png");
      newObj.water_level = obj.water_level;
    } else if (obj.water_level == 2) {
      newObj.grade = require("@/assets/waring/leval2.png");
      newObj.water_level = obj.water_level;
    } else if (obj.water_level == 3) {
      newObj.grade = require("@/assets/waring/leval3.png");
      newObj.water_level = obj.water_level;
    }
  }
  return newObj;
}
// 字符串转为对象
function strToObj(str) {
  let newObj = {};
  if (!str) {
    return;
  }
  let newStr = str.toString();
  let arr = newStr.split(";");
  arr.forEach((item) => {
    let [key, value] = item.split(":");
    if (key && value !== undefined) {
      // 确保键和值都有效
      newObj[key] = value;
    }
  });
  if (newObj.temp) {
    for (let key in newObj) {
      newObj[key] = Number(newObj[key]);
    }
    getArr(newObj);
    titleList.value[titleList.value.length - 1].num = warningArr.value.length;
  } else if (newObj.human_detection) {
    getWaterFlowData(newObj);
  } else if ("Smoke_density" in newObj) {
    let objAll = {};
    let objAnfang = {};
    for (let key in newObj) {
      newObj[key] = parseFloat(newObj[key]);
      if (key == "Smoke_density" || key == "Human") {
        objAnfang[key] = newObj[key];
      } else {
        objAll[key] = newObj[key];
      }
    }
    getTable(objAll);
    getYanwuData(objAnfang);
  }
}
// 安防
let tableTh = ref([]);
let tableTd = ref([]);
let getTable = (obj) => {
  tableTh.value = ["温度", "湿度", "光照度", "甲醛浓度"];
  tableTd.value = Object.values(obj);
};
// 水流预警
let getWaterFlowData = (obj) => {
  for (let key in obj) {
    obj[key] = (Math.floor(Math.random() * 7) + 4).toString();
  }
  if (waterArr.value.length < 18) {
    waterArr.value.push(obj);
  } else {
    waterArr.value.shift();
    waterArr.value.push(obj);
  }
  // waterArr.value.push(obj);
  // console.log(typeof obj.human_detection,'aaaaaa');
  nextTick(() => {
    let ele = document.getElementById("waterFlow");
    waterFlowFn(ele);
  });
};
function getNewData_1(obj) {
  if (obj) {
    obj = obj.toString();
    strToObj(obj);
  }
}
// setImmediate
const getNineData = (str) => {
  if (str) {
    str = str.toString();
    strToObj(str);
  }
};
// 009 ：
// 全部 Temp:018; 温度  Humi:035; 湿度  Illumination:001077; 光照度 lux  Formaldehyde:0.00ppm; 甲醛浓度   Smoke_density:0000; 烟雾浓度 ppm
// 综合安防 Human:1;  有人 1 无 0
// 007
// human_detection:0; 有人无人 discharge:0.000L/Min; 水流量
watchEffect(() => {
  getNewData_1(store.mqttMsg["zhongmi/000008/rx"]);
  getNewData_1(store.mqttMsg["zhongmi/000007/rx"]);
  getNineData(store.mqttMsg["zhongmi/000004/rx"]);
  // getNewData_1(store.mqttMsg["zhongmi/000006/rx"]);
  // getNewData_1(store.mqttMsg["zhongmi/000005/rx"]);
  // getNineData(store.mqttMsg["zhongmi/000009/rx"]);
});
onMounted(() => {
  chartsFn();
  window.addEventListener("resize", () => {
    charts.resize();
  });
});
onUnmounted(() => {
  charts.dispose();
});
</script>
<style scoped>
.left > h4 {
  color: var(--text-color);
  font-size: 20px;
  padding: 0.05rem 0.01rem;
  box-sizing: border-box;
  padding-left: 0.2rem;
}
.img1 {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.1rem;
}
.all {
  height: 5rem;
}
.anfang {
  height: 5rem;
  width: 100%;
  color: #fff;
}
.table {
  margin: 0 auto;
  width: 90%;
  font-size: 16px;
  color: #fff;
  border: 1px solid #fff;
  height: auto;
  padding: 3% 2%;
  box-sizing: border-box;
}
.table th {
  padding: 2% 0;
  width: 25%;
  text-align: center;
  /* border: 1px solid #fff; */
}
.table tbody {
  margin-top: 5%;
}
.table td {
  /* border: 1px solid #fff; */
  padding: 2% 0;
  width: 25%;
  text-align: center;
}
.left {
  width: 4rem;
  height: 100%;
  float: left;
  box-sizing: border-box;
  backdrop-filter: blur(10px);
  background-color: rgba(2, 18, 42, 0.14);
  background: url("@/assets/bj1.png") no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
}
.text {
  color: var(--text-color);
  font-size: 14px;
  padding: 0 0 0 0.05rem;
  box-sizing: border-box;
}
.content {
  padding: 0.25rem 0 0 0rem;
  box-sizing: border-box;
  height: 5rem;
  box-sizing: border-box;
}
#waterFlow {
  width: 100%;
  height: 4rem;
}
.content_m {
  height: 5rem;
  overflow: scroll;
  overflow-x: hidden;
  box-sizing: border-box;
}
.content_m::-webkit-scrollbar {
  width: 10px;
  height: 50px;
}
.content_m::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom right, #4d7fff 0%, #1a56ff 100%);
  height: 50px;
  border-radius: 5px;
}
.content_m::-webkit-scrollbar-track {
  background-color: transparent;
  /* border: 1px solid #ccc; */
}
.content_m::-webkit-scrollbar-button {
  display: none;
  border-radius: 5px;
}
.box_1 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box_1 p {
  margin: 0;
  padding: 0;
}
.box_1 .box_r p {
  padding: 0.02rem 0;
  font-size: 16px;
}
.top {
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
  padding: 7% 5%;
  box-sizing: border-box;
}
.top > div {
  display: flex;
  cursor: pointer;
  width: 33.3%;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  position: relative;
}
.right {
  width: 4rem;
  height: 100%;
  float: right;
  background: url("@/assets/bj2.png") no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
}
.icon {
  display: block;
  position: absolute;
  top: 2%;
  left: 20%;
  line-height: 0.2rem;
  width: 0.18rem;
  height: 0.18rem;
  background: #f8080d;
  color: var(--text-color);
  font-size: 12px;
  border-radius: 50%;
}
.iconfont {
  width: 0.3rem;
  height: 0.3rem;
  font-size: 25px;
  color: #8f939b;
  margin-right: 0.15rem;
  box-sizing: border-box;
}
.anfang .one,
.content_m .one {
  font-size: 16px;
  width: 3.6rem;
  display: flex;
  justify-content: space-between;
  margin: 0.15rem 0;
  padding: 0 0.2rem 0 0;
  cursor: pointer;
  background-image: linear-gradient(
    to right,
    rgba(27, 36, 86, 0.9),
    rgba(27, 36, 86, 0.3)
  );
  color: var(--text-color);
  box-sizing: border-box;
}
.content_m .active {
  background-image: linear-gradient(
    to right,
    rgba(19, 33, 57, 0.9),
    rgba(19, 33, 57, 0.3)
  );
}
.one_l {
  position: relative;
  padding: 0 0 0 0.1rem;
}
.one_l p {
  font-size: 18px;
  padding: 0.04rem 0;
}
.one_l p:nth-child(2) {
  font-size: 16px;
}
.one_l p:nth-child(3) {
  font-size: 16px;
}
.one_l::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0px;
  width: 0.05rem;
  height: 100%;
  background: #fff;
}
.one_l::before {
  background: #4373ad;
}
.one_r img {
  margin-top: 0.1rem;
  width: 0.25rem;
  height: 0.25rem;
}
.one_r {
  display: flex;
}
.one_r button {
  width: 0.6rem;
  height: 0.3rem;
  line-height: 0.3rem;
  align-self: center;
  font-size: 0.16rem;
}
.identification {
  position: relative;
}
.suggestion p {
  height: 1rem;
}
.identification b {
  padding: 0 0.3rem 0 0;
}
.identification::before {
  content: "";
  position: absolute;
  left: 19%;
  top: 0;
  width: 0.2rem;
  height: 0.2rem;
  border-radius: 0.1rem;
  background-image: radial-gradient(#9d1e25, #481724);
}
.right {
  color: var(--text-color);
  font-size: 18px;
  padding: 0.2rem 0;
  box-sizing: border-box;
  padding-left: 0.2rem;
}
.right h4 {
  color: var(--text-color);
  font-size: 20px;
  padding: 1vh 0;
}
.right p {
  font-size: 18px;
}
.dispatch h4 {
  position: relative;
}
.dispatch h4::after {
  content: "调度";
  position: absolute;
  top: 28%;
  left: 25%;
  color: var(--text-color);
  padding: 2px 18px;
  background: #5e9e93;
  font-size: 14px;
}
.dispatch_t {
  width: 100%;
  display: flex;
}
.dispatch_t div {
  text-align: center;
  width: 5vw;
}
.dispatch_m > div {
  padding: 0.5vh 0;
  background: #1b2239;
  display: flex;
  margin: 0.5vh 0;
}
.dispatch_m > div > div {
  text-align: center;
  width: 1rem;
  padding: 0.05rem 0;
  color: var(--text-color);
  font-size: 16px;
}
.dispatch_m > div > div:last-child {
  width: 0.5rem;
  height: 0.2rem;
  line-height: 0.2rem;
  background: #67a399;
  font-size: 14px;
  margin: 0 0 0 0.2rem;
}
.suggestion_t,
.suggestion_m {
  display: flex;
}
.suggestion_t > div {
  font-size: 16px;
  width: 1rem;
  text-align: center;
}
.suggestion_m {
  margin: 0.05rem 0 0 0;
}
.suggestion_m > div {
  width: 1rem;
  font-size: 14px;
  color: var(--text-color);
  height: 0.4rem;
  text-align: center;
  line-height: 0.4rem;
  /* padding: 0.5vh 0 0.5vh 0.5vw; */
  background: #082f5d;
}
.suggestion_m > div:first-child,
.suggestion_m > div:nth-child(3) {
  color: #2b7ba4;
}
#charts {
  width: 20vw;
  height: 15vh;
}
</style>
